import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/home/weather/model/daily_weather_model.dart';

import 'logic.dart';

class WeatherPage extends StatelessWidget {
  WeatherPage({super.key});

  final logic = Get.find<WeatherLogic>();
  final state = Get.find<WeatherLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        centerTitle: true,
        title: GestureDetector(
          child: const Wrap(
            spacing: 5,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: [
              // Text(state.city.value.name!, style: TextStyle(fontSize: 50.sp)),
              // Image.asset('assets/images/home/location_switch.png', width: 40.w, height: 40.h),
            ],
          ),
          // onTap: () => logic.goLocationSwitch(),
        ),
        backgroundColor: Colors.transparent,
      ),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 50.w),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/home/weather_bg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: FutureBuilder<bool>(
          future: logic.fromCacheOrRemoteLoad(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              // return const Center(
              //   child: Text('加载中。。。'),
              // );
              return Container();
            } else {
              if (snapshot.hasError) {
                // 当Future发生错误时，显示错误提示的UI
                return const Text('');
              } else {
                return snapshot.data!
                    ? ListView(
                        children: [
                          SizedBox(height: 80.h),
                          _buildTodayWeatherInfo(),
                          SizedBox(height: 50.h),
                          _buildFutureWeatherInfo(context),
                          SizedBox(height: 50.h),
                        ],
                      )
                    : Container();
              }
            }
          },
        ),
      ),
    );
  }

  Widget _buildTodayWeatherInfo() {
    String icon = state.currentWeather.icon;
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        if (icon.isNotEmpty)
          SvgPicture.asset(
            '${state.currentWeather.icon}',
            height: 200.h,
            width: 200.w,
            colorFilter: ColorFilter.mode(Colors.black.withOpacity(.7), BlendMode.srcIn),
          ),
        SizedBox(height: 40.h),
        Text('${state.currentWeather.currentTemp}', style: TextStyle(fontSize: 50.sp)),
        SizedBox(height: 10.h),
        Text(state.currentWeather.dateWeekText, style: TextStyle(fontSize: 45.sp)),
      ],
    );
  }

  Widget _buildFutureWeatherInfo(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: Get.height - 900.h,
      ),
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.white70.withOpacity(0.3),
          borderRadius: BorderRadius.circular(60.r),
        ),
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: state.dailyWeathers.length,
          itemBuilder: (context, index) => _buildWeatherItem(state.dailyWeathers[index]),
          // separatorBuilder: (context, index) {
          //   return index == state.dailyWeathers.length
          //       ? Container()
          //       : Divider(
          //           height: 1.h,
          //           color: Colors.grey.withOpacity(0.3),
          //         );
          // }),
        ),
      ),
    );
  }

  //生成widget列表
  ListTile _buildWeatherItem(DailyWeatherModel wm) {
    String icon = wm.icon;
    return ListTile(
      leading: Text(wm.weekDateText, style: TextStyle(fontSize: 50.sp)),
      trailing: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        alignment: WrapAlignment.center,
        children: [
          if (icon.isNotEmpty)
            SvgPicture.asset(
              '${wm.icon}',
              colorFilter: ColorFilter.mode(Colors.black.withOpacity(.7), BlendMode.srcIn),
              height: 80.h,
              width: 80.w,
            ),
          SizedBox(width: 95.w),
          Text('${wm.tempRangeText}', style: TextStyle(fontSize: 50.sp)),
        ],
      ),
    );
  }
}
